<template>
  <div class="jst_main">
    <div class="jst_head">
      <div class="jst_content">
        <el-button
          @click="dialogFormVisible = true"
          type="primary"
          icon="el-icon-circle-plus-outline"
          class="Add"
          >添加</el-button
        >
        <el-table
          class="table-detail"
          :header-cell-style="{ background: '#F7F8FA', color: '#333333' }"
          :data="tableData"
          border
        >
          <el-table-column
            prop="Id"
            label="编号"
            min-width="8%"
            align="center"
            header-align="center"
          >
          </el-table-column>

          <el-table-column
            prop="name"
            label="项目名称"
            min-width="64%"
            align="left"
            header-align="left"
          >
            <template slot-scope="scope">
              <i class="el-icon-folder-opened"></i>
              <span>
                {{ scope.row.name }}
              </span>
            </template>
          </el-table-column>

          <el-table-column
            prop="listorder"
            label="开发成员"
            min-width="8%"
            align="center"
            header-align="center"
          >
          </el-table-column>

          <el-table-column
            label="操作"
            min-width="20%"
            align="center"
            header-align="center"
          >
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                icon="el-icon-circle-plus-outline"
                @click="AddSubclass(scope.$index, scope.row)"
                >添加成员</el-button
              >
              <el-button
                size="mini"
                type="text"
                icon="el-icon-edit"
                @click="handleEdit(scope.$index, scope.row)"
                >编辑</el-button
              >
              <el-button
                size="mini"
                type="text"
                icon="el-icon-delete"
                style="color: #ff4d4f"
                @click="handleDelete(scope.$index, scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>

        <el-dialog
          title="添加项目"
          :visible.sync="dialogFormVisible"
          width="25%"
          style="margin: 0 auto; margin-top: 13vh"
        >
          <div style="height: 30vh">
            <el-form ref="form" :model="form" label-width="80px">
              <el-form-item label="所属地区">
                <el-select
                  v-model="form.region"
                  placeholder="请选择所属地区"
                  style="width: 80%; float: left"
                >
                  <el-option label="区域一" value="shanghai"></el-option>
                  <el-option label="区域二" value="beijing"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="项目名称">
                <el-input
                  v-model="form.name"
                  style="width: 80%; float: left"
                ></el-input>
              </el-form-item>

              <el-form-item label="项目成员">
                <el-input
                  v-model="form.name"
                  style="width: 80%; float: left"
                ></el-input>
              </el-form-item>

              <el-form-item label="优先级别">
                <el-input
                  v-model="form.name"
                  style="width: 80%; float: left"
                ></el-input>
              </el-form-item>
            </el-form>
          </div>

          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="dialogFormVisible = false"
              >确 定</el-button
            >
          </span>
        </el-dialog>
      </div>
    </div>
  </div>
</template>
    
    
    
    
    <script>
    
      export default {
        components: {
        },
        data() {
          return {
            dialogFormVisible: false,
            tableData: [{
              Id: '1',
              name: '前后端分离Ele+Vue 阿金',
              listorder: '阿金'
            }, {
              Id: '2',
              name: '前后端分离Ele+Vue 阿金',
              listorder: '阿金'
            }, {
              Id: '3',
              name: '前后端分离Ele+Vue 阿金',
              listorder: '阿金'
            }, {
              Id: '4',
              name: '前后端分离Ele+Vue 阿金',
              listorder: '阿金'
            }],
            Visiable:false,
              form: {
              name: '',
              region: '',
            }
          }
        },
        methods: {
          AddSubclass(index, row) {
            console.log(index, row);
          },
          handleEdit(index, row) {
            console.log(index, row);
          },
          handleDelete(index, row) {
            console.log(index, row);
          },
           handleClose(done) {
            this.$confirm('确认关闭？')
              .then(_ => {
                done();
              })
              .catch(_ => {});
          }
        }
      }
    </script>
    
    <style  scoped>
.Add {
  float: right;
  margin-top: 10px;
  margin-right: 20px;
}
.table-detail {
  border: 1px solid #dedede;
  border-top: none;
  border: 0;
  border-left: 1px solid #ebeef5 !important;
  border-top: 1px solid #ebeef5 !important;
  width: 98%;
  margin-left: 1%;
  margin-top: 20px;
  float: left;
  thead {
    font-family: PingFangSC-Regular;
    font-size: 14px;
    font-weight: 500;
    color: #333333;
    letter-spacing: 0;
    th {
      background: #f5f5f5;
      font-weight: normal;
    }
  }
  .wait {
    color: #2d8cf0;
    border-color: rgba(45, 140, 240, 0.1);
    background-color: rgba(45, 140, 240, 0.1);
  }
  .gray {
    color: #606266;
    border-color: rgba(96, 98, 102, 0.1);
    background-color: rgba(96, 98, 102, 0.1);
  }
  .yellow {
    color: #f7b500;
    border-color: rgba(247, 181, 0, 0.1);
    background-color: rgba(247, 181, 0, 0.1);
  }
  .green {
    color: #6dd400;
    border-color: rgba(109, 212, 0, 0.1);
    background-color: rgba(109, 212, 0, 0.1);
  }
  .danger {
    color: #fa5152;
    border-color: rgba(250, 81, 82, 0.1);
    background-color: rgba(250, 81, 82, 0.1);
  }
}
</style>
    